<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<!--
    JS是可以操作网页，网页的数据，内容，元素，样式和属性
    DOM操作
    DOM：Document object model，html编程接口，可以通过编程的接口修改网页的内容
-->
<!--
    1.通过ID进行选择，比较精确
    2.通过classname 进行选择
    3.通过标签的名称进行选择
        document.getElementsByClassName("")
        document.getElementsByTagName()
-->
<body>

<div id="demo2" class="demo"></div>
<div id="demo1" class="demo"></div>
<input type="button" onclick="display()" value="显示">
<input type="button" onclick="displayNone()" value="隐藏">
</body>
<script>
    let divElement = document.getElementById("demo1")
    divElement.innerHTML = "通过js插入一条数据"
    //查寻内容
    console.log("查询的内容为", divElement.innerHTML)
    //插入一个p标签
    divElement.innerHTML = "<p style='font-size: 24px;font-style: italic'>这是一个p标签里面的内容</p>"
    //通过document去创建一个元素
    let newElement = document.createElement("div")
    newElement.setAttribute("id", "new-div")


    let divElement2 = document.getElementById("demo2")
    divElement2.appendChild(newElement)

    //通过classname
    var elementsByClassName = document.getElementsByClassName("demo");
    console.log("元素内容是", elementsByClassName)
    elementsByClassName[0].innerHTML = "大家好"

    //通过js修改网页的样式
    divElement2.setAttribute("name", "div2")
    divElement2.setAttribute("style", "color: red;background: yellow")
    divElement2.style.fontSize = "100px"
    divElement2.style.background = "black"
</script>
<script style="display: ">
    //实现网页元素的显示和隐藏
    function display() {
        var elementById = document.getElementById("demo2");
        elementById.style.display=""
    }
    function displayNone() {
        var elementById = document.getElementById("demo2");
        elementById.style.display= "none";
    }
</script>
</html>